<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
  <script src="static/js/jquery-3.2.1.min.js"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
  <div class="layui-upload">
    <div class="upload-btn-box">
      <button type="button" class="layui-btn layui-btn-normal upload-btn" id="chooseFile">选择文件</button>
    </div>
    <div class="layui-upload-list" id="fileList">
      <table class="layui-table">
        <thead>
          <tr>
            <th>文件名</th>
            <th>大小</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody id="demoList"></tbody>
      </table>
    </div>
    <div class="upload-btn-box mt-10">
    	<label style="line-height:20px;padding-top:10px;">导入模板下载：</label>
    	<em>【<a  href='evalResultInfo/downFiles?fileName=eval_result_template.xlsx&type=template'>导入模板</a>】 </em>
    </div>
    <div class="upload-btn-box mt-10">
      <button type="button" class="layui-btn" id="chooseFileAction">提交</button>
      <button type="button" class="layui-btn" onclick="closeWin()">取消</button>
    </div>
  </div>
  <input type="hidden" id="evalNum" value="${evalNum}"/>
  <script src="static/layui/layui.js" charset="utf-8"></script>
  <script src="static/plugins/layer-v1.9.0/layer/layer.js"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
  <script>
    function closeWin(){
    	window.close();//关闭当前页
    }
    layui.use('upload', function () {
      var $ = layui.jquery, upload = layui.upload;
      
      //多文件列表示例
      var demoListView = $('#demoList')
      var uploadListIns = upload.render({
        elem: '#chooseFile',
        url: 'evalResultInfo/uploadFile',
        accept: 'file',
        multiple: true,
        auto: false,
        data : {
        	"evalNum" : $("#evalNum").val()
        },
        bindAction: '#chooseFileAction',
        choose: function (obj) {
          $('#fileList').css('display', 'block');
          //读取本地文件
          obj.preview(function (index, file, result) {
            $('#demoList').find('tr').remove()
            var tr = $(['<tr id="upload-' + index + '">',
                     '<td>' + file.name + '</td>',
                     '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>',
                     '<td>等待上传</td>',
                     '</tr>'].join(''));
            demoListView.append(tr);
          });
        },
        before : function(){
        	layer.load(1);
        },
        done: function (res, index, upload) {
        	layer.closeAll('loading');
            if (res.flag) { //上传成功
              var tr = demoListView.find('tr#upload-' + index)
                , tds = tr.children();
              tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
              tds.eq(3).html(''); //清空操作
              //return delete this.files[index]; //删除文件队列已经上传成功的文件
            }else{
               var filePath = res.filePath;
               var fileName = res.fileName;
               var tr = demoListView.find('tr#upload-' + index)
                 , tds = tr.children();
               tds.eq(2).html('<span style="color: #5FB878;">上传失败</span><em>【<a style="color:red" href="evalResultInfo/downFiles?fileName='+fileName+'&type=view">查看</a>】 </em>');
               tds.eq(3).html(''); //清空操作
            }
            //this.error(index, upload);
          },
          error: function (index, upload) {
            var tr = demoListView.find('tr#upload-' + index)
              , tds = tr.children();
            tds.eq(2).html('<span style="color: #FF5722;">导入失败</span>');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
          }
      })
    })
  </script>
<style>
  .clear { zoom:1; clear:both; }
  .clear:after { content:''; display:block; clear:both;}
  .upload-btn{
    background: #01135f;
  }
  #fileList{
    display: none;
  }
  .mt-10{
    margin-top: 10px;
  }
  .layui-upload{
    padding: 20px;
  }
 
</style>

</body>

</html>